<script lang="ts" setup>
import type { ProductStateModel } from '#/api/production/models';

import { ref } from 'vue';

import { InputSearch, List, ListItem } from 'ant-design-vue';

import { getProcessProductLimitApi } from '#/api/traceability/productProcessQuery';

defineOptions({
  inheritAttrs: false,
});

const emit = defineEmits<{
  (e: 'select', item: ProductStateModel): void;
}>();

const loading = ref(false);
const dataList = ref<ProductStateModel[]>([]);
const selectedItem = ref<ProductStateModel>();

async function onSearch(searchValue: string) {
  if (!searchValue) {
    dataList.value = [];
    return;
  }

  loading.value = true;
  dataList.value = await getProcessProductLimitApi(searchValue);
  loading.value = false;
}

function onSelect(item: ProductStateModel) {
  selectedItem.value = item;
  emit('select', item);
}
</script>

<template>
  <div class="h-full">
    <List
      :data-source="dataList"
      :loading="loading"
      :split="false"
      bordered
      class="h-full overflow-auto"
      enter-button
      size="small"
    >
      <template #header>
        <div>
          <InputSearch
            allow-clear
            placeholder="输入产品零件码查询"
            size="small"
            @search="onSearch"
          />
        </div>
      </template>
      <template #renderItem="{ item }">
        <ListItem>
          <div
            :class="[{ isActive: item.id === selectedItem?.id }]"
            class="w-full cursor-pointer rounded-sm px-1"
            @click="onSelect(item)"
          >
            {{ item.sn }}
          </div>
        </ListItem>
      </template>
    </List>
  </div>
</template>

<style scoped>
.isActive {
  background-color: #1890ff;
}
</style>
